<template>
  <div class="foote_nav">
    <div class="ft-nav">
      <router-link to="/home" tag="div" class="tabls">
        <i class="iconfont icon-shouye-shouye"></i>
        <span>首页</span>
      </router-link>
      <router-link to="/orders" tag="div" class="tabls">
        <i class="iconfont icon-dingdanzhongxin"></i>
        <span>订单</span>
      </router-link>
      <router-link to="/customer" tag="div" class="tabls">
        <i class="iconfont icon-kefu"></i>
        <span>客服</span>
      </router-link>
      <router-link to="/userinfo" tag="div" class="tabls">
        <i class="iconfont icon-wode"></i>
        <span>我的</span>
      </router-link>

      
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.foote_nav {
  .ft-nav {
    width: 100%;
    height: 55px;
    color: #333;
    position: fixed;
    bottom: 0;
    z-index: 2;
    left: 0;
    background-color: #fff;
    box-shadow: 0 -6px 6px rgb(0 0 0 / 10%);
    display: flex;
    justify-content: space-around;
    .tabls {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 4px;
      span {
        font-size: 12px;
        margin-top: 3px;
      }
      i {
        font-size: 24px;
        color: #e0e0e0;
      }
    }
    .active {
      color: #80d7d1;
      i {
        color: #80d7d1;
      }
    }
  }
}
</style>